<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Market' }">市场管理</el-breadcrumb-item>
    <el-breadcrumb-item>摊位列表</el-breadcrumb-item>
  </el-breadcrumb>

  <div>
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="摊位名称">
        <el-input v-model="sname" placeholder="请输入摊位名称"></el-input>
      </el-form-item>

      <el-form-item label="是否支付">
        <el-select v-model="status" placeholder="状态">
          <el-option label="请选择" value=""></el-option>
          <el-option  label="未使用" value="0"></el-option>
          <el-option  label="使用中" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.prevent="search()">查询</el-button>
      </el-form-item>

    </el-form>
  </div>

  <el-col :span="4">
    <el-button type="primary" @click="showAddStallDialog">添加摊位</el-button>
  </el-col>

  <div>
    <el-table :data="stallList" border stripe>
<!--      <el-table-column label="#" type="index"></el-table-column>-->
      <el-table-column label="摊位名称" prop="stallName" width="130px"></el-table-column>

      <el-table-column
          prop="stallImg"
          label="摊位图片"
          width="80">
        <template slot-scope="scope">
          <img :src="'http://localhost:81/img/marketStall/'+scope.row.stallImg" style="width: 60px;height: 60px;border-radius: 50%" />
        </template>
      </el-table-column>
      <el-table-column label="所属市场" prop="marketName" width="130px"></el-table-column>
      <el-table-column label="摊位编号" prop="stallId" width="130px"></el-table-column>
      <el-table-column label="租金" prop="rentPrice" width="130px"></el-table-column>
      <el-table-column label="租期" prop="rentData" width="130px"></el-table-column>
      <el-table-column label="当前租户" prop="username" width="100px"></el-table-column>
      <el-table-column label="到期时间" prop="endTime" width="130px"></el-table-column>
      <el-table-column label="状态" width="130px">
        <template slot-scope="sc">{{sc.row.status==0?'未使用':sc.row.status==1?'使用中':'竞拍中'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="250px">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="showEditDialog(scope.row)">管理</el-button>
          <el-button type="warning" size="mini" @click="showStallDetail(scope.row.stallId)">明细</el-button>
          <el-button type="danger" size="mini" @click="removeStallById(scope.row.stallId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
  </div>


  <!--    添加摊位的信息-->
  <el-dialog width="50%" title="添加摊位" :visible.sync="addStallDialogFormVisible"  :close-on-click-modal="false" @close="cancelAddStall">
    <el-form :model="addStallForm" ref="addStallRefForm" :rules="addStallFormRules" label-width="80px">

      <el-form-item label="摊位标题"  prop="stallName" label-width="80px">
        <el-input v-model="addStallForm.stallName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="所属市场" prop="marketId">
        <el-select v-model="addStallForm.marketId" placeholder="市场">
          <el-option label="请选择" value=""></el-option>
          <el-option v-for="m in mlist" :label="m.marketName" :value="m.marketId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="摊位面积"  prop="area" label-width="80px">
        <el-input v-model="addStallForm.area" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="摊位介绍"  prop="introduce" label-width="80px">
        <el-input v-model="addStallForm.introduce" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="摊位租金"  prop="rentPrice" label-width="80px">
        <el-input v-model="addStallForm.rentPrice" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="租用期限"  prop="rentData" label-width="80px">
        <el-input v-model="addStallForm.rentData" autocomplete="off" placeholder="月份"></el-input>
      </el-form-item>

      <el-form-item label="到期时间"  prop="endTime" label-width="80px">
        <el-date-picker
            v-model="addStallForm.endTime"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :editable="false">
        </el-date-picker>
      </el-form-item>



      <el-form-item label="是否使用" prop="status" label-width="80px">
        <el-select v-model="addStallForm.status" placeholder="状态">
          <el-option label="请选择" value=""></el-option>
          <el-option  label="未使用" value="0"></el-option>
          <el-option  label="使用中" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="摊位图片" prop="stallImg" label-width="80px">
        <el-upload
            :headers="headerObj"
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="uploadImg">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="cancelAddStall">取 消</el-button>
      <el-button type="primary" @click.prevent="saveAddStall">添 加</el-button>
    </div>
  </el-dialog>


  <!--    修改摊位的信息   -->
  <el-dialog title="修改摊位" :visible.sync="editStallDialogFormVisible"  :close-on-click-modal="false" @close="cancelEditStall">
    <el-form :model="editStallForm" ref="editStallRefForm" :rules="editStallFormRules" label-width="80px">

      <el-form-item label="摊位标题"  prop="stallName">
        <el-input v-model="editStallForm.stallName" autocomplete="off"></el-input>
      </el-form-item>

      <!--      <el-form-item label="摊位编号"  prop="stallId">-->
      <!--        <el-input v-model="addStallForm.stallId" autocomplete="off"></el-input>-->
      <!--      </el-form-item>-->

      <el-form-item label="所属市场" prop="marketId">
        <el-select v-model="editStallForm.marketId" placeholder="市场">
          <el-option label="请选择" value=""></el-option>
          <el-option v-for="m in mlist" :label="m.marketName" :value="m.marketId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="摊位面积"  prop="area">
        <el-input v-model="editStallForm.area" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="摊位介绍"  prop="introduce">
        <el-input v-model="editStallForm.introduce" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="摊位租金"  prop="rentPrice">
        <el-input v-model="editStallForm.rentPrice" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="租用期限"  prop="rentData">
        <el-input v-model="editStallForm.rentData" autocomplete="off" placeholder="月份"></el-input>
      </el-form-item>

      <el-form-item label="到期时间"  prop="endTime">
        <el-date-picker
            v-model="editStallForm.endTime"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :editable="false">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="使用状态" prop="status">
        <el-select v-model="editStallForm.status" placeholder="请选择状态">
          <el-option  :value="0" label="未支付"></el-option>
          <el-option  :value="1" label="已支付"></el-option>
          <el-option  :value="2" label="竞拍中"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="摊位图片" prop="stallImg">
        <el-upload
            :headers="headerObj"
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="uploadImg">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.prevent="cancelEditStall">取 消</el-button>
      <el-button type="primary" @click.prevent="saveEditStall">修 改</el-button>
    </div>
  </el-dialog>


</div>
</template>

<script>
let md = ''
import Bus from "@/bus";

export default {
  name: "MarketDetail",
  data(){
    return{
      headerObj:{
        token:window.sessionStorage.getItem("token")
      },
      imageUrl:'',
      uploadUrl:this.$Url.serverUrl+"/stall/uploadImg",
      editStallDialogFormVisible:false,
      addStallDialogFormVisible:false,
      mlist:[],
      sname:'',
      mid:'',
      status:"",
      pageNum:1,
      pageSize:3,
      total:0,
      stallList:[],
      addStallForm:{
        stallName:'',
        marketId:'',
        area:'',
        introduce:'',
        rentPrice:'',
        rentData:'',
        stallImg:'',
        status:'',
        endTime:''
      },
      editStallForm:{
        stallName:'',
        stallId:0,
        marketId:'',
        area:'',
        introduce:'',
        rentPrice:'',
        rentData:'',
        stallImg:'',
        status:1,
        endTime:''
      },
      addStallFormRules:{
        stallName:[
          {required:true , message:'摊位名称不能为空',trigger:'blur'}
        ],
        area:[
          {required:true,message:'摊位面积不能为空',trigger:'blur'},
          // {pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ,message:'必须符合邮箱格式',trigger:'blur'},
        ],
        rentPrice:[
          {required:true,message:'租金不能为空',trigger:'blur'}
        ],
        rentData:[
          {required:true,message:'租期不能为空',trigger:'blur'}
        ],
        marketId:[
          {required:true,message:'请选择市场',trigger:['change' , "blur"]}
        ],
        status:[
          {required:true,message:'请选择状态',trigger:['change' , "blur"]}
        ],
        introduce:[
          {required:true,message:'摊位介绍不能为空',trigger:'blur'}
        ],
        stallImg:[
          {required:true,message:'请上传摊位图片',trigger:'blur'}
        ],
        endTime:[
          {required:true,message:'到期时间不能为空',trigger:'blur'}
        ],

      },
      editStallFormRules:{
        stallName:[
          {required:true , message:'摊位名称不能为空',trigger:'blur'}
        ],
        area:[
          {required:true,message:'摊位面积不能为空',trigger:'blur'},
          // {pattern:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ,message:'必须符合邮箱格式',trigger:'blur'},
        ],
        rentPrice:[
          {required:true,message:'租金不能为空',trigger:'blur'}
        ],
        rentData:[
          {required:true,message:'租期不能为空',trigger:'blur'}
        ],
        marketId:[
          {required:true,message:'请选择市场',trigger:['change' , "blur"]}
        ],
        status:[
          {required:true,message:'请选择状态',trigger:['change' , "blur"]}
        ],
        introduce:[
          {required:true,message:'摊位介绍不能为空',trigger:'blur'}
        ],
        stallImg:[
          {required:true,message:'请上传摊位图片',trigger:'blur'}
        ],
      },

    }
  },
  methods:{

    //上传成功后的回调， 用于获取服务器回应的数据 ， 这里必须将修改的后的也加上去 ， 不然显示不出来更新的图片
    handleAvatarSuccess(res, file) {
      console.log("下面是上传成功之后的回调")
      console.log(res)
      console.log("上面是上传成功之后的回调")
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addStallForm.stallImg = res.data;
      this.editStallForm.stallImg = res.data;

    },
    //上传之前的回调 ，
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    /**
     * 关闭添加摊位的模态框
     */
    cancelAddStall(){
      this.addStallDialogFormVisible=false;
      this.imageUrl='';
      this.$refs.addStallRefForm.resetFields(); //清空表单中的内容
    },
    cancelEditStall(){
      this.editStallDialogFormVisible=false;
      this.$refs.editStallRefForm.resetFields(); //清空表单中的内容
      this.initStall();
    },
    saveAddStall(){
      this.$refs.addStallRefForm.validate((valid)=>{
        if(valid){

          let url = "/stall/add"
          // this.addStallForm.department.id = this.addStallForm.mid;
          let id = this.addStallForm.marketId;
          console.log(id)
          console.log("下面是addStallForm vvvvv")
          console.log(this.addStallForm)

          this.$axios.post(url,this.addStallForm)
              .then(res=>{
                if(res.data.code == 200){
                  this.addStallDialogFormVisible = false;
                  this.$refs.addStallRefForm.resetFields(); //清空表单中的内容
                  this.imageUrl='';     //添加成功之后 将添加的弹框内的图片清除
                  this.$message({
                    type:'success',
                    message:res.data.msg,
                    duration:1000
                  })
                  this.initStall();
                }else {
                  this.$message({
                    type:'error',
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
        }else{
          return;
        }
      })
    },
    /**
     * 显示添加摊位的模态框
     */
    showAddStallDialog(){
      this.imageUrl='';
      this.addStallDialogFormVisible = true;
    },
    saveEditStall(){
      this.$refs.editStallRefForm.validate(valid=>{
        if(!valid){
          return;
        }else {
          //提交保存
          let url = '/stall/modify';
          this.$axios.put(url , this.editStallForm)
              .then(res=>{
                if(res.data.code == 200){
                  this.editStallDialogFormVisible = false;
                  this.initStall();
                  this.imageUrl=''
                  this.$message({
                    type:'success',
                    message:res.data.msg,
                    duration:1000
                  })
                }else {
                  this.$message({
                    type:'error',
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
        }
      })


    },
    showEditDialog(obj){
      console.log('当前对象信息vvvvvvv');
      console.log(obj)
      this.editStallDialogFormVisible = true;
      this.imageUrl ='http://localhost:81/img/marketStall/'+obj.stallImg;
      this.editStallForm = obj;
    },

    handleCurrentChange(val){
      this.pageNum = val;
      this.initStall();
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.pageNum = 1;
      this.initStall();
    },
    /**
     * 搜索
     */
    search(){
      this.pageNum = 1;
      this.initStall();

    },

    showStallDetail(id){
      window.sessionStorage.setItem("stallId" , id);
      // Bus.$emit("stallId" , id);
      // this.$router.push({ path: `/rentDetail` });
      console.log("这是从摊位列表传的id"+id)
      this.$router.push({
        name: "rentDetail",
        path: "/rentDetail",
        params: {
          stallId:id
        }
      })
    },

    removeStallById(id){
      console.log(id)
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/stall/del/'+id;
        this.$axios.put(url)
            .then(res=>{
              if(res.data.code == 200){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.initStall();
              }else{
                this.$message({
                  type:'error',
                  message:res.data.msg,
                  duration:1000
                })
              }

            })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    initMarket(){
      let url = "market/list";
      this.$axios.get(url)
      .then(res=>{
        if(res.data.code == 200){

        this.mlist = res.data.data;

        }else {
          this.$message({
            type:'error',
            message:res.data.msg,
            duration:1000
          })
        }
      })
    },



    initStall(){
      let url = "stall/list";
      this.$axios.get(url,{
        params:{
          now:this.pageNum,
          size:this.pageSize,
          stallName:this.sname,
          status:this.status,
          marketId:md

        }
      }).then(res=>{
        console.log("================================")
        console.log(res)
        if(res.data.code == 200){
          this.stallList = res.data.data.list ;
          this.pageSize = res.data.data.pageSize;
          this.pageNum = res.data.data.pageNum ;
          this.total = res.data.data.total ;


        }else {
          this.$message({
            type:'error',
            message:res.data.msg,
            duration:1000
          })
        }
      })
    }


  },
  created(){
    md = window.sessionStorage.getItem("marketId");
    console.log("输出通过sessionstorage="+md)
    let that = this;
    md = this.$route.params.marketId;
    this.initMarket()
    this.initStall()

  }

}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style scoped>

</style>